<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>角色管理</title>
</head>
<body>
<table class="layui-hide" id="test" lay-filter="test"></table>
<div id="editFirm" style="display: none">
    <form class="layui-form" action="" lay-filter="myForm" id="myForm">
        <div class="layui-form-item" style="display: none">
            <label class="layui-form-label">id</label>
            <div class="layui-input-block">
                <input class="layui-input" lay-verify="title" name="roleId"
                       type="text">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">名称</label>
            <div class="layui-input-block">
                <input class="layui-input" lay-verify="title" name="roleName"
                       placeholder="请输入职务名称" type="text">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">权限</label>
            <div class="layui-input-inline">
                <select name="permissionId" id="permissionIdSelect">
                    <option selected disabled>请设置权限</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn" lay-submit="" lay-filter="sub">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>
<script type="text/javascript">
    $(function () {
        while ($("#permissionIdSelect>option").length > 0) {
            $("#permissionIdSelect>option:eq(0)").remove();
        }
        $("#permissionIdSelect").append("<option selected disabled value='0'>请设置权限</option>")
        $.ajax({
            url: '/permission/queryAllPermission',
            type: 'get',
            dataType: 'json',
            success: function (res) {
                var data = res.data
                for (let i in data) {
                    let htm = '<option value=' + data[i].permissionId + '>' + data[i].permissionName + '</option>';
                    $("#permissionIdSelect").append(htm)
                }
            }
        })
    })
</script>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
        <button class="layui-btn layui-btn-sm" lay-event="insert">新增</button>

    </div>
</script>


<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
</script>

<script>
    layui.use(['table', 'form'], function () {
        var table = layui.table;
        var form = layui.form;
        // 创建渲染实例
        table.render({
            elem: '#test'
            , url: "/role/queryAllRole"
            , toolbar: '#toolbarDemo'
            , defaultToolbar: ['filter', 'exports', 'print', {
                title: '帮助'
                , layEvent: 'LAYTABLE_TIPS'
                , icon: 'layui-icon-tips'
            }]
            , height: 'full-200'
            , cellMinWidth: 80
            , totalRow: true
            , page: true
            , limit: 10
            , cols: [[
                {type: 'checkbox', fixed: 'left'}
                , {field: 'roleId', width: 80, title: '职务id'}
                , {field: 'roleName', width: 80, title: '职务名称'}
                , {
                    field: 'permissionName', width: 80, title: '权限名称', templet: function (data) {
                        return data.permission.permissionName;
                    }
                }
                , {fixed: 'right', title: '操作', width: 70, minWidth: 70, toolbar: '#barDemo'}
            ]]
        });

        // 工具栏事件
        table.on('toolbar(test)', function (obj) {
            var id = obj.config.id;
            var checkStatus = table.checkStatus(id);
            var othis = lay(this);
            switch (obj.event) {
                case 'getCheckData':
                    var data = checkStatus.data;
                    layer.alert(layui.util.escape(JSON.stringify(data)));
                    break;
                case 'insert':
                    form.val('myForm', {
                        "roleId": null,
                        "roleName": null,
                        "permissionId": 0
                    });
                    $("#myForm").attr("action", "/role/insertRole")
                    editDiv = layer.open({
                        title: '编辑',
                        type: 1,
                        area: ['60%', '60%'],
                        shade: 0,
                        content: $("#editFirm")
                    });
                    break;
            }
        });

        table.on('tool(test)', function (obj) {
            var data = obj.data;
            form.val('myForm', {
                "roleId": data.roleId,
                "roleName": data.roleName,
                "permissionId": data.permission.permissionId
            });
            $("#myForm").attr("action", "/role/updateRole")
            editDiv = layer.open({
                title: '编辑',
                type: 1,
                area: ['60%', '60%'],
                shade: 0,
                content: $("#editFirm")
            });
        });
        form.on('submit(sub)', function (data) {
            let url = $("#myForm").attr("action")
            console.log(data.field)
            $.ajax({
                url: url,
                type: "put",
                data: JSON.stringify(data.field),
                contentType: 'application/json',
                dataType: "json",
                success: function (data) {
                    if (data.code == 0) {
                        table.reload("test")
                        layer.close(editDiv)
                    } else {
                        layer.msg(data.msg)
                    }
                }
            })
            return false;
        });
    });
</script>
<script type="text/javascript">
    $(function () {
        $('#layui-layer12 > span.layui-layer-setwin').click(function () {
            $("#editFirm").css("display","none")
        })
    })
</script>
</body>
</html>